(function(Vue){
    //定组件
 Vue.component("home",{
     template:`<h1>主页组件</h1>`,
 });
 Vue.component("product", {
     template: `<h1>产品组件</h1>`,
 });
  Vue.component("profile", {
      template: `<h1>公司介绍组件</h1>`,
  });
//   配置路由
  let routers = [
      {
          path:"/home",
          component:"home",
      },
      {
          path: "/product",
          component: "product",
      },
      {
      path: "/profile",
      component: "profile",
      }
  ];
  //添加hash change 监听事件
  window.addEventListener("hashchange",function(e){
    //   事件源对象
   console.log("事件源对象:"+e);
   //location hash 值
   console.log(window.location.hash);
   //获取到location的hash 以#用split劈开
   let path = window.location.hash.split("#")[1];
   //寻找路由对应配置项
   let router_item = routers.find(v=>{
       if(v.path === path){
           return true;
       }
   });
   console.log(router_item);
   console.log(vm.componentId);
   //将vm实例datacomponentId 与路由的组件匹配实现切换
   vm.componentId = router_item.component;
   
   
   
  })
})(Vue);